<template>
    <div class="Table">
        <div id="left-draw1" class="left-draw1" ref="rightCAD1"></div>
    </div>
</template>

<script>
import $ from "jquery";
import {
    ExWithoutFrameDrawing,
} from "@/api/api";
import { getLocalStorage } from "@/utils/storage";
import eventBus from "@/eventBus/bus";
import _ from 'lodash-es';
import { showLoading, hideLoading } from "@/utils/loading";
import * as svg_opt from "@/utils/svg_opt.js";
export default {
    name: "DeviceLoginIndex",
    data() {
        return {

            MapList: [],
            MapValue: 8,
            pfdData: [],
            sourceUrl: '',

            activeMackUp: null,

            FunType: 1,
            tar: ''

        };
    },
    components: {
    },
    props: ["selectMacData"],// 1列表2列表-图形
    watch: {

    },
    methods: {
        TestFn() {
            this.getFullFieldMapListApi();
        },



        // 获取图纸
        async getSvgByFunFn(dataJson) {
            try {
                svg_opt.removeSvg();

            } catch (error) {

            }

            let res = await ExWithoutFrameDrawing(dataJson)
            if (res.data.code != 0) {
                // 绘制线组
                setTimeout(() => {
                    this.$emit('changeWait', true, true); // 通知上层加载完毕
                }, 500);
            }
            // 当接口报错，且只有一个机器时，进行提醒。
            if (res.data.code != 0 && this.selectMacData.length == 1) {
                // 绘制线组
                this.$alert(res.data.msg, '', { confirmButtonText: 'OK', type: 'warning' });
                return
            }
            let Data = res.data.data[0];
            Data.ShowProject = dataJson.ShowProject;

            this.svgStartFn(Data);
        },

        // svg开始处理入口
        svgStartFn(Data) {
            showLoading();
            let inSourceUrl = Data.drw_pass
            if (inSourceUrl == null || typeof inSourceUrl == "undefined") {
                svg_opt.removeSvg();
                return;
            }

            let num = inSourceUrl.lastIndexOf(".") + 1;
            this.sourceExt = inSourceUrl.substring(num);
            this.sourceUrl = inSourceUrl;

            let EXT = this.sourceExt;
            if (
                EXT == "png" ||
                EXT == "jpg" ||
                EXT == "gif" ||
                EXT == "bmp" ||
                EXT == "jpeg" ||
                EXT == "tif" ||
                EXT == "tiff"
            ) {
                this.isSourcePic = true;
                this.svgSourceUrl = require("@/assets/model/method-draw-image.svg");
            } else {
                this.isSourcePic = false;
                this.svgSourceUrl = inSourceUrl;
            }

            if (!this.svgSourceUrl || this.svgSourceUrl == "") {
                svg_opt.removeSvg();
                $('.left-draw1').html('NO Data');
                $('.left-draw1').css({
                    'display': 'flex',
                    'align-items': 'center',
                    'justify-content': 'space-evenly',
                    'font-size': '15px'
                });
                return;
            } else {
                // fetch(this.svgSourceUrl)
                //     .then(async response => {
                //         // 处理响应的数据
                //         if (response.status != 200) {
                //             svg_opt.removeSvg();
                //             $('.left-draw1').html('NO Data');
                //             $('.left-draw1').css({
                //                 'display': 'flex',
                //                 'align-items': 'center',
                //                 'justify-content': 'space-evenly',
                //                 'font-size': '15px'
                //             });
                //             return
                //         }
                //         window.open(this.currentItem.path);
                //     })
                //     .catch(async error => {
                //     });
            }



            this.isSvgLoading = true;
            svg_opt.setSvgLineWidthRatio(1.5);
            svg_opt.setSvgBoundingBoxRatio(0, 0, 1);
            svg_opt.setCanClickSelectMarkup(false);

            svg_opt.setCanEditSelectMarkup(false);
            svg_opt.setCanFitPositionAndScale(false);
            svg_opt.setEditDotWidthRatio(3);
            hideLoading();
            svg_opt.AddSvg(this.svgSourceUrl, "left-draw1", this.onSvgMousePosChange, true,
                    0,
                    0,
                    Data.ext == "wmf" ? 1 : -1);
            svg_opt.SetSvgMouseMode(0);
            svg_opt.setLoadCallBack(this.onSvgLoaded);
            svg_opt.setSelectCallBack(this.onLineGroupSelect);
            console.log(this.svgSourceUrl);

            this.getFullFieldMarkApi(Data);
        },
        // svg加载失败处理
        onSvgLoaded(error) {
            console.log("onSvgLoaded --- ", error);
            this.isSvgLoading = false;
            hideLoading();
            if (error) {
                console.log(error);
                return;
            }

            this.isSvgLoaded = true;

            if (this.isSourcePic) {
                svg_opt.changeSvgElementData({
                    tagName: "img-content",
                    paramName: "xlink:href",
                    newValue: this.sourceUrl,
                    isReport: true
                });
            }
        },

        // 获取MarkUp数据
        async getFullFieldMarkApi(Data) {
            showLoading()
            if (Data.ShowProject == 0) {
                console.log(111111);
            }
            if (Data.ShowProject == 1) {
                console.log(222222);

                try {
                    Data.model.forEach(item => {
                        item.poS_ORDR_Clone = item.pos_no
                        item.poS_NO = Number(item.num)
                    })
                } catch (error) {

                }

                // genBallMarkupsList
                this.pfdData = this.genBallMarkupsList(
                    Data.model
                    // temp
                );


                setTimeout(() => {
                    // genMarkupOrignDataFromExternalData
                    svg_opt.genMarkupOrignDataFromExternalData(this.pfdData);

                    hideLoading();

                }, 500);
            }
            if (Data.ShowProject == 2) {
                setTimeout(() => {
                    svg_opt.loadMarkupsFromFile(Data.avred[0]);
                }, 1000);
            }

            setTimeout(() => {
                this.$emit('changeWait', true); // 通知上层加载完毕
            }, 1500);

        },
        genBallMarkupsList(originData) {
            var reList = [];
            for (var i = 0; i < originData.length; i++) {
                let orignItem = originData[i];
                if (orignItem.poS_ORDR == null) continue;

                let temp = {};
                temp.sId = orignItem.poS_ORDR;
                temp.shapeType = Number(orignItem.blN_TYPE) + 12;
                temp.showType = "trans";
                temp.showID = orignItem.poS_ORDR;
                temp.lineColor = "#0000FF";
                temp.lineWidth = "5";
                temp.fontSize = orignItem.blN_FNTSIZ;
                temp.fontName = orignItem.blN_FNTNAM;
                temp.lineStyle = "0";
                temp.points = orignItem.thckBlnPoints;
                temp.IdName = `${orignItem.num}-${orignItem.name}`
                if (temp.points[0].blN_COLOR)
                    temp.ballFillColor = temp.points[0].blN_COLOR;
                else temp.ballFillColor = "#ffffff";
                reList.push(temp);

                for (var j = 0; j < orignItem.thckBlnPoints.length; j++) {
                    orignItem.thckBlnPoints[j].x =
                        orignItem.thckBlnPoints[j].blN_X;
                    orignItem.thckBlnPoints[j].y =
                        orignItem.thckBlnPoints[j].blN_Y;
                }
            }
            return reList;
        },

        /**
         * 加载xml到图纸中
         */
        loadMarkupFile(path) {
            let res = svg_opt.loadMarkupsFromFile(path);
            if (!res) {
                this.$alert(this.$t("message.cadViewer.loadMarkupFileError"), '', {
                    confirmButtonText: 'OK',
                    type: 'warning',
                });
            }
            // this.updateLayersInfo();
        },
        /**
         * 处理线组数据
         */
        genVisualBallMarkupsList(originData) {
            let reList = [];
            for (let i = 0; i < originData.length; i++) {
                let originItem = originData[i];
                let reListLength = reList.length;
                let reListLastItem =
                    reListLength > 0 ? reList[reListLength - 1] : null;

                // 新建一个球标组 球标数组为空 新位置节点与原球标组pos_no不同
                if (
                    reListLength == 0 ||
                    reListLastItem.pos_no != originItem.poS_NO ||
                    (reListLastItem.pos_no == originItem.poS_NO &&
                        (reListLastItem.bln_kbn != originItem.blN_KBN ||
                            reListLastItem.bln_dtlno != originItem.blN_DTLNO))
                ) {
                    let ballTemp = {};
                    ballTemp.sId = originItem.poS_NO;
                    ballTemp.shapeType = Number(originItem.blN_TYPE) + 12;
                    ballTemp.showType = "trans";
                    ballTemp.showID = originItem.poS_NO;
                    // ballTemp.lineColor = "#33cccc";
                    ballTemp.lineWidth = "5";
                    ballTemp.fontSize = originItem.blN_FNTSIZ;
                    ballTemp.fontName = originItem.blN_FNTNAM;
                    ballTemp.lineStyle = "0";
                    ballTemp.points = [];
                    ballTemp.bln_kbn = originItem.blN_KBN;
                    ballTemp.bln_dtlno = originItem.blN_DTLNO;

                    ballTemp.pos_no = originItem.poS_NO;
                    // ballTemp.pos_no1 = originItem.poS_NO;
                    ballTemp.allText = originItem.poS_ORDR_Clone;
                    if (ballTemp.bln_color)
                        ballTemp.lineColor = ballTemp.bln_color;
                    else ballTemp.lineColor = "#ffffff";
                    // ballTemp.ballFillColor = "#33cccc";

                    ballTemp.points.push({
                        bln_x: originItem.blN_X,
                        bln_y: originItem.blN_Y,
                        x: originItem.blN_X,
                        y: originItem.blN_Y,
                    });

                    reList.push(ballTemp);
                } else {
                    reListLastItem.points.push({
                        bln_x: originItem.blN_X,
                        bln_y: originItem.blN_Y,
                        x: originItem.blN_X,
                        y: originItem.blN_Y,
                    });
                }
            }
            return reList;
        },
        async exportSvgDataStr() {
            let result = ''
            try {
                result = svg_opt.exportSvgDataStr();
            } catch (error) {

            }
            return result
        },

        // 开始
        initFn() {

            this.getSvgByFunFn();

        }

    },
    created() { },
    mounted() {

    },
    beforeDestroy() {

    },
    destroyed() { },
};
</script>

<style lang="scss" scoped>
.Table {
    height: 100%;
    border-top: 1px solid #e1e1e1;
    // padding-top: 12px;
    background-color: #FFF;
    width: 100%;

    .left-draw1 {
        width: 90%;
        height: 90%;
        cursor: pointer;
        position: relative;
        left: 5%;
        top: 5%;
    }
}
</style>